import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { getVolunteerActivityDetail } from './api/volunteerService'

export default function VolunteeActivityDetail() {
    const { id }: any = useParams()

    // 活动详情
    const [activityDetail, setActivityDetail] = useState<any>({})

    // 获取活动详情
    async function getActivityDetail(id: any) {
        const res = await getVolunteerActivityDetail(id)
        console.log((res));
        setActivityDetail(res.data.data)
    }

    useEffect(() => {
        getActivityDetail(id)
    }, [])

    if (Object.keys(activityDetail).length === 0) {
        return <div></div>
    }
    return (
        <div className='news-detail v-ac-detail'>
            <div className='v-ac-detail-text'>
                <div className='head'>{activityDetail.title}</div>
                <div dangerouslySetInnerHTML={{ __html: activityDetail.detail }}></div>
                <div><span style={{ fontWeight: 900 }}>承办单位：</span><span style={{ color: 'skyblue' }}>{activityDetail.undertaker}</span></div>
                <div><span style={{ fontWeight: 900 }}>开始时间：</span><span style={{ color: 'orange' }}>{activityDetail.startAt}</span></div>
                <div><span style={{ fontWeight: 900 }}>人员要求：</span><span style={{ color: 'green' }}>{activityDetail.requireText}</span></div>
            </div>
        </div>
    )
}
